<template>
  <div class="home">
    <div class="form">
      <el-form ref="form" :model="form" label-width="80px">
        <el-upload
          class="avatar-uploader"
          action="http://127.0.0.1:9999/invitation/imgUrl"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-form-item label="用户名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.pass"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="qq">
          <el-input v-model="form.qq"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio v-model="radio" :label="1">男</el-radio>
          <el-radio v-model="radio" :label="2">女</el-radio>
        </el-form-item>
        <el-form-item label="格言">
          <el-input type="textarea" v-model="form.geyan"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" round @click="onSubmit">立即修改</el-button>
          <el-button type="info" round @click="$router.back(-1)">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import API from "@/api/user.js";
export default {
  data() {
    return {
      radio: "2",
      userCode: "",
      imageUrl: "",
      form: {
        name: "",
        pass: "",
        email: "",
        qq: "",
        phone: "",
        sex: "1",
        geyan: ""
      }
    };
  },
  mounted() {
    this.userCode = sessionStorage.getItem("userCode");
    this.getData();
  },
  methods: {
    getData() {
      let obj = {
        userCode: this.userCode
      };
      this.$axios.post(API.list, obj).then(res => {
        if (res.data.responseCode === 200) {
          console.log(res.data.data.list);
          this.imageUrl = res.data.data.list[0].userUrl;
          this.form.name = res.data.data.list[0].userName;
          this.form.pass = res.data.data.list[0].userPwd;
          this.form.email = res.data.data.list[0].email;
          this.form.qq = res.data.data.list[0].qq;
          this.form.phone = res.data.data.list[0].phone;
          this.radio = res.data.data.list[0].userSex;
          this.form.geyan = res.data.data.list[0].geyan;
          console.log(this.radio);
        } else {
          this.$message.error("获取资料失败");
          res.data.data.list;
        }
      });
    },
    onSubmit() {
      let obj1 = {
        email: this.form.email,
        geyan: this.form.geyan,
        phone: this.form.phone,
        qq: this.form.qq,
        userName: this.form.name,
        userPwd: this.form.pass,
        userSex: this.radio,
        userUrl: this.imageUrl,
        userCode: this.userCode
      };
      this.$axios.post(API.update, obj1).then(res => {
        if (res.data.responseCode === 200) {
          this.$alert("信息已经修改，请重新登录！", "消息提示！", {
            confirmButtonText: "确定",
            callback: action => {
              this.$router.push("/login");
            }
          });
        } else {
          this.$message.error("修改失败");
          res.data.data.list;
        }
      });
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = res.data;
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    }
  }
};
</script>


<style scoped>
@import url(../login/reset.css);
#app {
  margin: 0;
  padding: 0;
}
.home {
  background-color: rgba(6, 240, 240, 0.493);
  background-image: url(../login/bgImg1.png);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 720px;
}
p {
  padding-top: 2%;
  font-size: 40px;
}
.form {
  background-color: rgba(6, 240, 240, 0.493);
  width: 425px;
  margin: 0 auto;
  height: 500px;
}
form {
  width: 350px;
  margin-top: 10%;
}
.avatar-uploader {
  margin-left: 70px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin-left: 75px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.avatar {
  width: 50px;
  height: 50px;
  display: block;
}
</style>
